<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<com :prantmsg="msgFu" @func="show"></com>
			<hr />
			<h1>这是子组件的数据我拿到啦：</h1>
			<div v-for="item in list">
				<p>{{item.id}}</p>
			</div>
		</div>
		<template id="tmp">
			<div>
				<h3>这是一个元素{{msg}}--------{{prantmsg}}</h3>
				<input type="button" @click="change" value="调用父亲的show方法" />
			</div>
		</template>
		<script>
			
			var msg1={
				msg:"我是子组件",
				list:[
					{name:'小偷儿子',age: 12},
					{name:'小偷儿子',age: 12},
					{name:'小偷儿子',age: 12}
				]
			}
			var com={
				data(){
					return msg1
				},
				template:'#tmp',
				props:['prantmsg'],
				methods:{
					change(){
						this.$emit('func',454546)
						// this.$emit('func',this.msg)
						this.$emit('func',this.list)
					}
				}
			}
			
			var vm = new Vue({
				el: '#app',
				data: {
					msgFu:'我是父组件的元素',
					msgdata:'',
					list:'',
				},
				methods: {
					show(data){
						console.log("我是父亲的show方法"+data)
						console.log(data)
						// this.msgdata=data
						this.list=data
					}
				},
				components:{
					com
				}
			})
		</script>
	</body>
</html>
